微信公众号登录
本文是 《三方登录》 的延伸，讲解 yudao-mall-uniapp (opens new window) 商城小程序如何实现微信 公众号 登录的功能。
# 1. 公众号准备
友情提示：
本文，我们以“测试公众号”举例子，方便大家操作，认证一个公众号太难了！！！
① 参考 微信公众平台接口测试帐号申请 (opens new window) 链接，申请一个测试公众号。
② 将 appID 和 appSecret 配置，设置到后端项目 application-local.yaml 的 wx.mp 配置项中。如下图所示：
③ 修改“JS接口安全域名”，设置为前端的访问地址。例如说，现在本地是 http://127.0.0.1:3000。如下图所示：
注意：自己需要关注下自己的测试公众号！！！
④ 修改“网页授权获取用户基本信息”，设置为前端的访问地址。例如说，现在本地是 http://127.0.0.1:3000。如下图所示：
补充说明：如果你是正式的公众号，需要额外看下这部分的内容：
① 设置“IP白名单”，在公众号的 [设置与开发 - 安全中心] 菜单，如下图所示：
② 在公众号的 [设置与开发 - 公众号设置] 菜单，设置“JS接口安全域名”、“JS接口安全域名”、“网页授权域名”，如下图所示：
- 设置时，需要外网可访问，可以需要使用 natapp 进行内网穿透
- 上图的
MP_verify_XXXXXXXXXXXXXXXX.txt文件，可以直接放在yudao-mall-uniapp商城项目的根目录
# 2. 代码实现
# 2.1 项目启动
① 参考 《快速启动【前端】》 文档的「2. uni-app 商城移动端」小节，将 yudao-mall-uniapp 商城项目跑起来。
② 下载 微信开发者工具 (opens new window)，并进行安装。安装后，选择「公众号网页项目」。如下图所示：
# 2.2 微信 JSSDK
访问 http://127.0.0.1:3000/ 地址（其它地址也可以），它会触发 微信 JSSDK (opens new window) 初始化的逻辑，对应前端 sheep/libs/sdk-h5-weixin.js 文件的 #init(...) 方法中。
微信 JSSDK 所需要的签名，由后端的 AppAuthController 的 #createWeixinMpJsapiSignature(...) 方法所提供。
# 2.3 登录流程
友情提示：
可以简单阅读下 《微信官方文档 —— 网页授权》 (opens new window) 文章。
① 访问 http://127.0.0.1:3000/#/pages/user/info 地址，触发弹出“登录窗口”，对应前端 sheep/components/s-auth-modal/s-auth-modal.vue 组件。如下图所示：
② 点击「微信登录」图标，触发微信公众号登录。前端核心实现都在 sheep/platform/provider/wechat/officialAccount.js 的 #login(...) 方法中。它一共包含 2 个步骤。
③ 【第一步】前端调用后端的 AppAuthController 的 #socialAuthRedirect(...) 方法，获得微信公众号的登录地址，并进行跳转。效果如下图：
ps：为了在微信登录成功后，可以回到登陆前的 URL 地址，会将该 URL 存储到 uni.setStorageSync('returnUrl', location.href) 中。
④ 【第二步】点击「同意」按钮，跳转回前端的 pages/index/login.vue 页面，进行 真正的 微信登录逻辑。
此时，前端从 URL 中解析到微信回调提供的 code 授权码参数，调用后端的 AppAuthController 的 #socialLogin(...) 方法，进行登录逻辑。注意：
- 情况一：如果该微信用户已经绑定会员用户，则直接进行登录
- 情况二：如果该微信用户没有绑定会员用户，则会自动创建一个会员用户，并进行登录。下次重新登录时，就走【情况一】的逻辑。
ps：登录成功后，通过 uni.getStorageSync('returnUrl') 获得登录前的 URL 地址，进行跳转。